<!-- 阿米巴仓库渠道管理 -->
<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span v-if="criteriaForm.isYear == 0">月度经营报表</span>
        <span v-else>年度经营报表</span>
      </div>
      <div>
        <el-form :model="criteriaForm" ref="basisForm" size="mini" inline>
          <el-row>
            <el-form-item label="请选择月份区间:" v-if="criteriaForm.isYear == 0">
              <el-date-picker
                type="month"
                value-format="yyyy-MM"
                suffix-icon="el-icon-date"
                v-model="criteriaForm.startMonth"
                style="width: 220px;"
              ></el-date-picker
              >&nbsp;&nbsp;-&nbsp;&nbsp;
              <el-date-picker
                placeholder="默认等于开始月份"
                value-format="yyyy-MM"
                type="month"
                suffix-icon="el-icon-date"
                v-model="criteriaForm.endMonth"
                style="width: 220px;"
              ></el-date-picker>
            </el-form-item>
            <el-form-item v-else label="请选择年份:">
              <el-date-picker
                v-model="criteriaForm.selectYear"
                value-format="yyyy"
                type="year"
                placeholder="选择年"
              ></el-date-picker>
            </el-form-item>

            <el-form-item label="预计毛利率:" prop="estimatedGrossMargin">
              <el-input
                size="mini"
                v-model="criteriaForm.estimatedGrossMargin"
                clearable
              />
            </el-form-item>

            <el-form-item
              v-if="isAdminOrFinanceHead"
              label="所属部门:"
              v-model="criteriaForm.belongGroupIds"
            >
              <el-select
                size="mini"
                v-model="criteriaForm.belongGroupIds"
                placeholder="请选择所属部门"  filterable clearable multiple
              >
                <el-option
                  v-for="(item, value) in userGroupMap"
                  :key="value"
                  :label="item"
                  :value="parseInt(value)"
                />
              </el-select>
              <div v-if="hasSelect == 1">
                <el-tag type="info" size="mini" v-for="(item,value) in selectMap" :key="value" :label="item" style="margin-right:10px" @click="selectDepart(value)">{{item}}</el-tag>
              </div>
            </el-form-item>
            <el-form-item label="显示占比" prop="isShowProportion">
              <el-switch v-model="criteriaForm.isShowProportion"></el-switch>
            </el-form-item>
            <el-form-item label="实际金额" prop="isQueryPlanActual">
              <el-switch v-model="criteriaForm.isQueryPlanActual"></el-switch>
            </el-form-item>
            <el-form-item label="计划金额" prop="isQueryPlan">
              <el-switch v-model="criteriaForm.isQueryPlan"></el-switch>
            </el-form-item>
            <el-form-item label="本年累计" prop="isShowYealCumul" v-if="criteriaForm.isYear == 0">
              <el-switch v-model="criteriaForm.isShowYealCumul"></el-switch>
            </el-form-item>
            <div style="float: right">
              <el-button
                size="mini"
                type="success"
                @click="submitExprot()"
                v-loading.fullscreen.lock="fullscreenLoading"
              >导出</el-button
              >
              <el-button
                size="mini"
                type="primary"
                @click="showOperatingStatementAll()"
              >统计</el-button
              >
            </div>
          </el-row>
          <el-row>
            <el-form-item
              v-if="isAdminOrFinanceHead"
              label="区域:"
              v-model="criteriaForm.region"
            >
              <el-select
                size="mini"
                v-model="criteriaForm.region"
                placeholder="请选择区域" multiple filterable clearable
              >
                <el-option
                  v-for="(item, value) in regionTypeMap"
                  :key="value"
                  :label="item"
                  :value="value"
                />
              </el-select>
            </el-form-item>

            <el-form-item
              v-if="isAdminOrFinanceHead"
              label="国家:"
              v-model="criteriaForm.countryId"
            >
              <el-select
                size="mini"
                v-model="criteriaForm.countryId"
                placeholder="请选择国家" multiple filterable clearable
              >
                <el-option
                  v-for="(item, value) in countrysMap"
                  :key="value"
                  :label="item"
                  :value="value"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              v-if="isAdminOrFinanceHead"
              label="国内分区:"
              v-model="criteriaForm.countryStateIds"
            >
              <el-select
                size="mini"
                v-model="criteriaForm.countryStateIds"
                placeholder="请选择国内分区" multiple filterable clearable
              >
                <el-option
                  v-for="(item, value) in countryStateMap"
                  :key="value"
                  :label="item"
                  :value="value"
                />
              </el-select>
            </el-form-item>

            <el-form-item
              v-if="isAdminOrFinanceHead"
              label="物流方法:"
              v-model="criteriaForm.shippngWay"
            >
              <el-select
                size="mini"
                v-model="criteriaForm.shippngWay"
                placeholder="请选择物流方法" multiple filterable clearable
              >
                <el-option
                  v-for="(item, value) in shippngWaysMap"
                  :key="value"
                  :label="item"
                  :value="value"
                />
              </el-select>
            </el-form-item>

            <el-form-item
              v-if="isAdminOrFinanceHead"
              label="入库渠道:"
              v-model="criteriaForm.channelIds"
            >
              <el-select
                size="mini"
                v-model="criteriaForm.channelIds"
                placeholder="请选择入库渠道" multiple filterable clearable
              >
                <el-option
                  v-for="(item, value) in channelsMap"
                  :key="value"
                  :label="item"
                  :value="value"
                />
              </el-select>
            </el-form-item>
          </el-row>
        </el-form>
      </div>
    </el-card>

    <el-card class="box-card" style="margin-top: 20px;">
      <div slot="header" class="clearfix"><span>统计结果</span></div>
      <div v-show="showBoo1">
        <p>
          1.系统每天早上8点会自动更新阿米巴缓存数据,最近更新时间：{{
            updateTime
          }}
        </p>
        <p>
          2.统计、导出默认查询缓存里的数据，如果想要最新的数据，请联系财务主管或者系统管理员
        </p>
      </div>
      <div v-show="showBoo2" style="overflow-y: auto;">
        <table border="1" cellpadding="0" cellspacing="0" class="table-data">
          <thead>
            <tr>
              <template v-for="(item, index) in tableHeads">
                <th align="center">{{ item }}</th>
              </template>
            </tr>
          </thead>
          <tbody>
            <template v-for="(item, index) in data">
              <tr>
                <template v-if="item.superiorSize == 2">
                  <template v-for="(item1, index1) in item.superiorSubjectName">
                    <td
                      width="100px"
                      v-if="item.subjectAndMergeRowMap[index1]"
                      :rowspan="item.subjectAndMergeRowMap[index1]"
                      align="center"
                    >
                      {{ item1 }}
                    </td>
                  </template>
                  <td :rowspan="item.rowspan2" width="120px;">
                    {{ item.subjectName }}
                  </td>
                </template>
                <template v-else-if="item.superiorSize == 1">
                  <template v-for="(item4, index4) in item.superiorSubjectName">
                    <td
                      v-if="item.subjectAndMergeRowMap[index4]"
                      :rowspan="item.subjectAndMergeRowMap[index4]"
                      align="center"
                    >
                      {{ item4 }}
                    </td>
                  </template>
                  <td :rowspan="item.rowspan2" colSpan="2" align="center">
                    {{ item.subjectName }}
                  </td>
                </template>
                <template v-else>
                  <td colSpan="3" align="center">{{ item.subjectName }}</td>
                </template>
                <template v-if="item.operationStatementDataMap">
                  <template
                    v-for="(item2, index2) in item.operationStatementDataMap"
                  >
                    <template v-if="item2">
                      <template v-if="index2.includes('~')">
                        <td>{{ item2.actualAmount }}</td>
                        <td v-if="criteriaForm.isShowProportion">{{ item2.actualProportion }}</td>
                      </template>
                      <template v-else>
                        <template v-if="operatingStatementType == 0">
                          <td>{{ item2.actualAmount }}</td>
                          <td v-if="criteriaForm.isShowProportion">{{ item2.actualProportion }}</td>
                          <td>{{ item2.planAmount }}</td>
                          <td v-if="criteriaForm.isShowProportion">{{ item2.planProportion }}</td>
                          <td v-if="criteriaForm.isShowProportion">{{ item2.amountDiff }}</td>
                          <td v-if="criteriaForm.isShowProportion">{{ item2.proportionDiff }}</td>
                        </template>
                        <template v-else-if="operatingStatementType == 1">
                          <td>{{ item2.planAmount }}</td>
                        </template>
                        <template v-else-if="operatingStatementType == 2">
                          <td>{{ item2.actualAmount }}</td>
                        </template>
                      </template>
                    </template>
                  </template>
                </template>
              </tr>
            </template>
          </tbody>
        </table>
      </div>
    </el-card>
  </div>
</template>
<script>
import { ajax } from "@/store/yg/common/utils";
import * as constant from "@/store/yg/common/constant";
export default {
  components: {},
  props: ["isYear"],
  data() {
    return {
      fullscreenLoading: false,
      showBoo1: true,
      showBoo2: false,
      criteriaForm: {
        startMonth: "",
        endMonth: "",
        selectYear: "",
        estimatedGrossMargin: "",
        belongGroupIds: null,
        region:[],
        shippngWay:[],
        countryStateIds:[],
        countryId:[],
        isYear: 0,
        isQueryPlan: true,
        isQueryPlanActual: true,
        isShowProportion: false,
        isShowYealCumul: false
      },
      userGroupMap: {},
      regionTypeMap:{},
      countrysMap:{},
      selectCountryMap: {},
      continentOfCountryMap: {},
      shippngWaysMap:{},
      channelsMap:{},
      countryStateMap:{},
      isAdminOrFinanceHead: true,
      queryCache: 0,
      isQueryPlanActual: 1,
      isQueryPlan: 1,
      updateTime: "",
      showResult: "",
      tableHeads: [],
      selectMap: { '0': '销售部', '1': '全选', '-1': '全不选'},
      hasSelect: 0,
      userDepartSelectMap: null,
      data: [
        {
          departId: "",
          monthOperationStatementData: "",
          operationStatementDataMap: {},
          subjectLevel: "",
          subjectName: "",
          subjectNo: "",
          superiorSubjectName: [],
          superiorSize: "",
          rowspan: "",
          rowspan2: ""
        }
      ],
      operatingStatementType: ""
    };
  },
  mounted() {
    if (this.isYear) {
      this.criteriaForm.isYear = this.isYear;
    }
    this.autoInitData();
  },
  watch: {
    'criteriaForm.region': {
      handler(nVal) {
        if(nVal && nVal.length > 0){
          this.countrysMap = {};
          for(let val of nVal){
            let countryIds = this.continentOfCountryMap[val];
            if(countryIds && countryIds.length > 0){
              for(let countryId of countryIds){
                this.countrysMap[countryId] = this.selectCountryMap[countryId];
              }
            }
          }
        }else{
          this.countrysMap = this.selectCountryMap;
        }
      }
    }
  },
  methods: {
    selectDepart(op){
      const departIds = this.userDepartSelectMap[op];
      console.log(departIds);
      this.criteriaForm.belongGroupIds = departIds;
    },
    async autoInitData() {
      // console.log('==='+this.criteriaForm.isYear);
      const res = await ajax("toOperatingStatement", {
        isYear: this.criteriaForm.isYear
      });
      if (res.code == 200) {
        const data = res.data;
        this.userGroupMap = data.userGroupMap;
        this.regionTypeMap=data.regionTypeMap;
        this.continentOfCountryMap = data.continentOfCountryMap;
        this.selectCountryMap = data.countrysMap;
        this.countrysMap=this.selectCountryMap;
        this.shippngWaysMap=data.shippngWaysMap;
        this.channelsMap=data.channelsMap;
        this.countryStateMap=data.countryStateMap;
        this.criteriaForm.estimatedGrossMargin = data.estimatedGrossMargin;
        this.updateTime = data.updateTime;
        this.hasSelect = data.hasSelect;
        this.userDepartSelectMap = data.userDepartSelectMap;
        if (this.criteriaForm.isYear == 1) {
          this.criteriaForm.selectYear = data.currentYear;
        } else {
          this.criteriaForm.startMonth = data.currentMonth;
        }
      } else {
        this.$message.error(res.message);
      }
    },
    submitExprot() {
      console.log(this.criteriaForm);
      this.fullscreenLoading = true;
      ajax("exportOperatingStatementAll", this.criteriaForm)
        .then(res => {
          if (res.path) {
            this.fullscreenLoading = false;
            //helper.hide_loading();
            var fileName = res.path;
            if (fileName) {
              window.open(constant.FILE_SERVER + fileName);
            } else {
              qiao.bs.alert("导出失败");
            }
          }
        })
        .catch(error => {
          console.log(error);
          this.fullscreenLoading = false;
          this.$message.error(error);
        });
    },
    async showOperatingStatementAll() {
      this.fullscreenLoading = true;
      const res = await ajax("showOperatingStatementAll", this.criteriaForm);
      this.fullscreenLoading = false;
      if (res.code == 200) {
        if (res.data.errorTips) {
          this.$message.error(res.data.errorTips);
        } else {
          this.showBoo1 = false;
          this.showBoo2 = true;
          this.data = res.data.data;
          // console.log(Object.keys(this.data[0].superiorSubjectName).length);
          this.operatingStatementType = res.data.operatingStatementType;
          this.tableHeads = res.data.tableHeads;
        }
      } else {
        this.$message.error(res.message);
      }
    }
  }
};
</script>
<style scoped>
/deep/.el-select {
  width: 100%;
}
.table-data {
  width: 100%;
  background: #fff;
  border-top: solid 1px #ddd;
  border-left: solid 1px #ddd;
  border-collapse: collapse;
  text-align: left;
}
.table-data td,
th {
  padding: 2px 4px;
  border-right: solid 1px #ddd;
  border-bottom: solid 1px #ddd;
}
</style>
